<template>
  <div class="receive-send">
    <el-dialog
      title="RECEIVE"
      :visible.sync="receive.dialogVisible"
      @opened="qrcode"
      width="40%"
      center
    >
      <div class="dialog-content">
        <div class="code-content">
          <ul>
            <li class="code-aq">
              <i :class="receive.icon"></i>
              <span>{{receive.rsContnt}}</span>
            </li>
            <li class="qr-code">
              <div id="qrcode" ref="qrcode" class="qrcode"></div>
              <p :style="{color: receive.color}" ref="receiveCode">{{receive.address}}</p>
            </li>
            <li class="copy-qr">
              <el-button @click="copyAddress">
                <i class="el-icon-copy-document"></i>Copy Address
              </el-button>
              <el-button @click="downloadQrcode">
                <i class="el-icon-s-grid"></i>Download QR Code
              </el-button>
              <p>{{receive.details}}</p>
            </li>
          </ul>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import QRCode from 'qrcodejs2'
export default {
  props: ["receive"],
  methods: {
    /**
     * @name: 地址复制
     * ---------------- 
     * @test: test font
     * @msg: 
     * @param {type} 
     * @return: 
     */
    copyAddress() {
      let oInput = document.createElement('input')
      oInput.value = this.$refs.receiveCode.innerHTML
      document.body.appendChild(oInput);
      oInput.select(); // 选择对象;
      document.execCommand("Copy"); // 执行浏览器复制命令
      this.$message({
        message: 'Replication success',
        type: 'success'
      });
      oInput.remove()
    },
    /**
     * [qrcode description]
     *  生成二维码
     *  -----------------------
     * @Author   LLP
     * @DateTime 2019-12-20T16:31:24+0800
     * @return   {[type]}                 [description]
     */
    qrcode() {
      this.$refs.qrcode.innerHTML = ""
      this.qr = new QRCode('qrcode', {
        width: 125,  
        height: 125,
        text: this.receive.address, // 二维码地址
      })
    },
    /**
     * [downloadQrcode description]
     * 二维码下载
     * -------------------------------------
     * @Author   LLP
     * @DateTime 2019-12-20T17:06:12+0800
     * @return   {[type]}                 [description]
     */
    downloadQrcode() {
      let url = this.$refs.qrcode.lastChild.src
      let a = document.createElement('a')
      let event = new MouseEvent('click')
      a.download = this.receive.rsContnt
      a.href = url
      a.dispatchEvent(event) 
    }
  }
};
</script>
<style lang="less">
.receive-send {
  .el-dialog__header {
    font-size: 28px;
    font-weight: 600;
    padding-bottom: 35px;
    border-bottom: 2px solid #ffaf46;
  }
  .dialog-content {
    .code-content {
      height: 450px;
      width: 100%;
      margin: 20px 0;
      padding: 50px 0;
      border-radius: 20px;
      ul {
        text-align: center;
        line-height: 50px;
        .code-aq {
          i {
            display: inline-block;
            font-size: 25px;
            vertical-align: middle;
            padding-right: 15px;
          }
          span {
            font-size: 25px;
            font-weight: normal;
            display: inline-block;
            vertical-align: middle;
          }
        }
        .qr-code {
          p {
            font-size: 16px;
            font-weight: normal;
            color: #f7cf4a;
          }
          img {
            width: 125px;
            height: 125px;
            margin: 0px auto;
            display: inline-block;
            border: 1px solid #cccccc;
          }
        }
        .copy-qr {
          .el-button {
            width: 160px;
            font-size: 12px;
          }
          p {
            font-size: 14px;
            font-weight: normal;
          }
        }
      }
    }
  }
}
</style>